<template>
  <uni-nav-bar title="绑定车牌号" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" style="padding:20rpx 20rpx 80rpx;">
    <view>请输入车牌号</view>
    <view class="center" @click="openPlatePicker()">
      <view v-for="(item,index) in 7" :key="index" :style="{display:numberplate?'none':'block'}"></view>
      <view v-for="(item,index) in list" :key="index" :style="{display:!numberplate?'none':'block'}">{{item}}</view>
    </view>
  </view>
  <view class="add" @click="submit()">绑定</view>
  <!-- 车牌弹框 -->
  <VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { navBack, redirectTo } from '@/utils/navigator';
  import VehiclePlatePad from '@c/common/VehiclePlatePads.vue';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  import { onLoad } from '@dcloudio/uni-app';
  // static
  const plug_id = getDriverID();
  const isShowPlatePad = ref(false); //添加车牌弹框
  const numberplate = ref(''); //车牌号
  const list = ref([])
  const token = ref('')
  onLoad((pearm) => {
    token.value = pearm.token
  })
  /**
   * 打开/关闭车牌弹框
   */
  function openPlatePicker() {
    isShowPlatePad.value = true
  }
  function confirmPlate(plate : string) {
    numberplate.value = plate;
    list.value = plate.split('')
    list.value.splice(2, 0, "")
    console.log(list.value)
    isShowPlatePad.value = false;
  }
  //提交
  function submit() {
    showLoading()
    const payload = {
      plug_id,
      code: numberplate.value,
      token: token.value
    };
    toPublish('plug/bindCartEwm',
      payload,
      (obj : any) => {
        const { code, msg, data } = obj;
        if (code === 1) {
          successToast(msg)
          setTimeout(() => {
            redirectTo('carSticker/Vehicle?cart_id=' + data)
          }, 1000)
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .center {
    width: 100%;
    justify-content: space-between;

    view:nth-of-type(3) {
      width: 9rpx;
      height: 9rpx;
      border-radius: 50%;
      background-color: #666;
      border: 0px;
    }

    view:nth-of-type(10) {
      width: 9rpx;
      height: 9rpx;
      border-radius: 50%;
      background-color: #666;
      border: 0px;
    }

    view {
      width: 79rpx;
      height: 78rpx;
      border: 1px solid #C3C2C2;
      border-radius: 5px;
      margin-top: 40rpx;
      text-align: center;
      line-height: 78rpx;
    }
  }

  .add {
    width: 50%;
    height: 92rpx;
    background: #39A7FF;
    border-radius: 46rpx;
    text-align: center;
    line-height: 92rpx;
    color: #fff;
    position: absolute;
    bottom: 40rpx;
    left: 25%;
  }
</style>